<template>
  <div id="app">
    
    <!-- 固定中间main -->
    <div class="appindex-mian-box">
      <div class="appindex-mian">
        <transition>
                <router-view ></router-view>
        </transition>
      </div>
    </div>
    <!-- 固定底部tabbar -->
    <div class="appindex-bottom-box"  v-show="$route.meta.showFooter == undefined || $route.meta.showFooter">
      <div class="appindex-bottom">
        <router-link to="/home" tag="dl">
          <dt>
            <span class="iconfont">&#xe695;</span>
          </dt>
          <dd>首页</dd>
        </router-link>

        <router-link to="/found" tag="dl">
          <dt>
            <span class="iconfont">&#xe6b1;</span>
          </dt>
          <dd>发现</dd>
        </router-link>

        <router-link to="/offer" tag="dl">
          <dt>
            <span class="iconfont">&#xe694;</span>
          </dt>
          <dd>闪电报价</dd>
        </router-link>

        <router-link to="/dynamic" tag="dl">
          <dt>
            <span class="iconfont">&#xe70d;</span>
          </dt>
          <dd>动态</dd>
        </router-link>

        <router-link to="/my" tag="dl">
          <dt>
            <span class="iconfont">&#xe70e;</span>
          </dt>
          <dd>我的</dd>
        </router-link>
      </div>
    </div>
    <!-- 结束 -->
  </div>
</template>

<script>

/* 字体图标 */

export default {
  name: "App",
  
  data() {
    return {
     
    }
  },
  methods:{
   
  },
  watch:{
   
  }
};
</script>

<style scoped>
/* 切换动画*/
.v-enter
{
  opacity: 0;
  transform: translateX(100%);
  position: absolute;
}
.v-leave-to{
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}
.v-enter-active,
.v-leave-active{
  transition: all .2s;
}
/* 首页图标 */
.appindex-bottom-box {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  padding-bottom: 0.3rem;
  z-index: 100;
}
.appindex-bottom {
  width: 100%;
}
.appindex-bottom {
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}
.appindex-bottom dl {
  width: 20%;
}

.appindex-bottom dl dt {
     width: 100%;
    height:25px;
    text-align: center;
    padding-top:5px;
}
.appindex-bottom dl dt span {
  font-size: 1.6rem;
  text-align: center;
  color: #999;
   padding-top: -5px;
}
.appindex-bottom dl dd {
  font-size: 0.5rem;
  text-align: center;
  color: #999;
}
/* tabbar 激活 */


.icon-noactive {
  color: #666 !important;
}
/* 页面主体 */
.appindex-mian-box {
 width: 100%;
 overflow-x: hidden;
}

.appindex-bottom-box .router-link-active dt span{
    color: #1e1e1e !important;
}
.appindex-bottom-box .router-link-active dd{
    color: #1e1e1e !important;
}

.appindex-mian-box{
  width: 100%;
}
</style>
